import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Swiper, Toast, Grid } from 'antd-mobile'
import { getBannersAPI, getTenementGroupsAPI, getNewsAPI } from '../../api'
import { serverurl } from '../../utils/request'
import './index.scss'
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
import getCurrentCityName from '../../utils/getCurrentCityName' // 获取当前城市的方法,Pormise

function Home() {
  // const { value } = JSON.parse(localStorage.getItem('hkzf_city'))
  // console.log('当前城市的id', value)
  const navigate = useNavigate() // 路由跳转
  // 轮播图数据
  const [bannersList, setBannersList] = useState([])
  // 租房小组数据
  const [tenementGroups, getTenementGroups] = useState([])
  // 最新资讯数据
  const [news, getNews] = useState([])
  // 根据城市名称查询该城市信息
  const [curCityName, setCurCityName] = useState('上海')
  // 获取轮播图数据方法
  const loadBanners = async () => {
    const { data: res } = await getBannersAPI()
    setBannersList(res.body)
  }
  // 获取租房小组数据方法
  const loadtenementGroups = async () => {
    // AREA%7C88cff55c-aaa4-e2e0 这个是传递地理位置，返回不同地区的房源信息，（可以不传，返回默认的4条数据）
    const { data: res } = await getTenementGroupsAPI()
    getTenementGroups(res.body)
  }
  // 获取最新资讯数据的方法
  const loadNews = async () => {
    const { data: res } = await getNewsAPI()
    getNews(res.body)
  }
  // 获取当前城市名称
  const loadCurName = async () => {
    const res = await getCurrentCityName()
    // console.log(JSON.parse(res).label, '#################')
    setCurCityName(JSON.parse(res).label)
  }
  useEffect(() => {
    loadBanners() // 调用获取轮播图的方法
    loadtenementGroups() // 调用获取租房小组数据方法
    loadNews() // 调用获取最新资讯数据的方法
    // 通过IP定位获取到当前城市名称
    loadCurName()
  }, [])

  // 渲染轮播图
  const items = bannersList.map((item) => (
    <Swiper.Item key={item.id}>
      <div
        className="content"
        onClick={() => {
          Toast.show(`你点击了卡片 ${item.id}`)
        }}
      >
        <img src={serverurl + item.imgSrc} alt="" />
      </div>
    </Swiper.Item>
  ))
  // 导航菜单数据
  const navs = [
    {
      id: 1,
      img: Nav1,
      title: '整租',
      path: '/houseList',
    },
    {
      id: 2,
      img: Nav2,
      title: '合租',
      path: '/houseList',
    },
    {
      id: 3,
      img: Nav3,
      title: '地图找房',
      path: '/map',
    },
    {
      id: 4,
      img: Nav4,
      title: '去出租',
      path: '/houseList',
    },
  ]

  // 获取地理位置
  // navigator.geolocation.getCurrentPosition((position) => {
  //   console.log(position)
  // })

  return (
    <div>
      {/* 轮播图 */}
      <div className="top">
        <Swiper loop autoplay>
          {items}
        </Swiper>
        {/* 顶部搜索框 */}
        <div className="search-box">
          {/* 左侧白色区域 */}
          <div className="searchLeft">
            {/* 位置 */}
            <div className="location" onClick={() => navigate('/cityList')}>
              <span>{curCityName}</span>
              <i className="iconfont icon-arrow"></i>
            </div>
            {/* 搜索表单 */}
            <div className="ipt" onClick={() => navigate('/search')}>
              <input type="text" placeholder="请输入小区或地址" />
              <i className="iconfont icon-seach"></i>
            </div>
          </div>
          {/* 右侧地图图标 */}
          <i className="iconfont icon-map" onClick={() => navigate('/map')}></i>
        </div>
      </div>

      {/* 导航菜单 */}
      <div className="nav">
        {navs.map((item) => (
          <div
            className="navItem"
            key={item.id}
            onClick={() => {
              navigate(item.path)
            }}
          >
            <img src={item.img} alt="" />
            <h2>{item.title}</h2>
          </div>
        ))}
      </div>

      {/* 租房小组 */}
      <div className="groups">
        <div className="tenementGroup">
          <h3 className="title">租房小组</h3>
          <span className="more">更多</span>
        </div>
        <Grid columns={2} gap={8}>
          {tenementGroups.map((item) => (
            <Grid.Item key={item.id}>
              <div className="gridItem">
                <div className="itemLeft">
                  <h5 className="Ltitle">{item.title}</h5>
                  <div className="Ldesc">{item.desc}</div>
                </div>
                <div className="itemRight">
                  <img src={serverurl + item.imgSrc} alt="" />
                </div>
              </div>
            </Grid.Item>
          ))}
        </Grid>
      </div>

      {/* 最新资讯 */}
      <div className="news">
        <h3 className="newTitle">最新资讯</h3>
        {news.map((item) => (
          <div className="newsItem" key={item.id}>
            <img src={serverurl + item.imgSrc} alt="" />
            <div className="itemCon">
              <div className="itemTitle">{item.title}</div>
              <div className="itemdesc">
                <span>{item.from}</span>
                <span>{item.date}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* <i className="iconfont icon-map"></i>
      <i className="iconfont icon-seach"></i>
      <i className="iconfont icon-arrow"></i> */}
    </div>
  )
}

export default Home
